<template>
    <el-container class="home-container">
        <el-header>
            <div class="title">
                <img src="~assets/img/heima.png" alt="">
                <span>电商管理系统</span>
            </div>
            <el-button @click="exit" type='info'>退出</el-button>
        </el-header>
        <el-container>
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <div class="toggle-button" @click="collapseClick">|||</div>
                <el-menu background-color="#333744"
                        text-color="#fff"
                        active-text-color="#4489E8"
                        unique-opened
                        :collapse='isCollapse'
                        :collapse-transition='false'
                        router
                        :default-active='activePath'>
                    <el-submenu :index="item.id + ''" 
                                v-for="item in menuList" 
                                :key="item.id">
                        <template slot="title">
                            <i :class="iconObjs[item.id]"></i>
                            <span>{{item.authName}}</span>
                        </template>            
                        
                        <el-menu-item :index="'/' + subItem.path" 
                                    v-for="subItem in item.children" 
                                    :key="subItem.id"
                                    @click="navActivePath('/' + subItem.path)">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{subItem.authName}}</span>
                            </template>  
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { getMenuList } from 'network/query'
export default {
   name:'Home',
   data(){
       return {
           menuList:[],
           iconObjs:{
               '125':'iconfont icon-users',
                '103':'iconfont icon-tijikongjian',
                '101':'iconfont icon-shangpin',
                '102':'iconfont icon-danju',
                '145':'iconfont icon-baobiao'
           },
           isCollapse:false,
           activePath : ''
       }
   },
   created(){
       this.getMenuList()
       this.activePath = window.sessionStorage.getItem('activePath')
   },
   methods:{
       exit(){
           window.sessionStorage.removeItem('token')
           this.$router.push('/login')
       },

    //    网络请求方法
       getMenuList(){
           getMenuList().then(res => {
               console.log(res);
               if(res.meta.status !== 200){
                   return this.$message.error(res.meta.msg)
               }else{
                   this.menuList = res.data
               }
               
           })
       },

    //    事件监听方法
        collapseClick(){
            this.isCollapse = !this.isCollapse
        },

        navActivePath(activePath){
            window.sessionStorage.setItem('activePath',activePath)
            this.activePath = activePath
        }
   }
};
</script>

<style scoped>
.home-container{
    height: 100%;
  }
  .el-header{
    background-color: #363D40;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: white;
  }

  .title{
      display: flex;
      align-items: center;
  }
  .title span{
      margin-left: 20px;
      font-size: 20px;
  }


  .el-aside{
    background-color: #333744;
  }

  .el-aside .el-menu{
      border-right: none;
  }

  .el-main{
    background-color: #E9EDF1;
  }

  .iconfont{
      margin-right: 8px;
  }

  .toggle-button{
      background-color: #4a5064;
      color: #fff;
      display: flex;
      justify-content: center;
      letter-spacing: 0.2em;
      cursor: pointer;
  }

</style>
